import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Button, Empty, Icon, Input, Tooltip } from 'antd';
import _ from 'lodash';
import { getTargetList } from '@api/task';
import { getStaffList } from '@api/staff';
import TargetManageTable from './components/target-manage-table';
import TargetSettingModal from './components/target-setting-modal';
import EmptyDataImg from '@images/empty-data-blue.png';
import './index.less';

const prefixCls = 'target-manage';
const Search = Input.Search;

class TargetManage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      filter: {
        page: 1,
        pageSize: 10,
        search: ''
      },
      total: 0,
      count: 0,
      tableList: [],
      staffList: [],
      ipManageModalVisible: false
    };
  }

  componentDidMount() {
    this.getTargetList();
    this.getStaffList();
  }

  getStaffList = () => {
    getStaffList().then(res => {
      this.setState({
        staffList: _.get(res, 'data.data.list', [])
      });
    });
  };

  //获取目标组列表
  getTargetList = () => {
    const { filter } = this.state;
    if (filter.search) {
      filter.search = filter.search.replace(/\\/g, '\\\\');
      filter.search = filter.search.replace(/\|/g, '\\|');
    }
    this.setState({ loading: true });
    getTargetList(filter)
      .then(res => {
        const data = res.data.data;
        this.setState({
          loading: false,
          tableList: _.get(data, 'list', []),
          total: _.get(data, 'total', 0),
          count: _.get(data, 'count', 0)
        });
      })
      .catch(() => this.setState({ loading: false }));
  };

  onTableChange = pagination => {
    let { filter } = this.state;
    filter.page = pagination.current;
    filter.pageSize = pagination.pageSize;
    this.setState({ filter }, () => {
      this.getTargetList();
    });
  };

  changeModalVisible = visible => {
    this.setState({
      ipManageModalVisible: visible
    });
  };

  render() {
    const {
      count,
      total,
      filter,
      tableList,
      ipManageModalVisible,
      staffList,
      loading
    } = this.state;
    const pagination = {
      total: count,
      current: filter.page,
      pageSize: filter.pageSize,
      showQuickJumper: true,
      pageSizeOptions: ['10', '20', '50', '100'],
      showSizeChanger: true,
      showTotal: num => `共 ${num} 条`,
      size: 'small'
    };

    return (
      <div className={`${prefixCls}`}>
        <div className={`${prefixCls}-title`}>
          目标组管理
          <Tooltip
            className="info"
            placement="right"
            overlayClassName={`${prefixCls}-title-desc`}
            title="创建资产探测任务时可以直接选择事先配置的目标组，任务结束后，新发现的资产会自动填充标签、部门属性"
          >
            <Icon type="exclamation-circle" />
          </Tooltip>
        </div>
        <div className={`${prefixCls}-header`}>
          <div className={`${prefixCls}-header-left`}>
            <Button type="primary" onClick={() => this.changeModalVisible(true)}>
              添加目标组
            </Button>
          </div>
          <div className={`${prefixCls}-header-right`}>
            <Search
              enterButton
              placeholder="请输入名称、IP、域名"
              onSearch={value => {
                filter.search = value.toString();
                filter.page = 1;
                this.setState({ filter }, this.getTargetList);
              }}
            />
          </div>
        </div>
        {total ? (
          <div>
            <div className={`${prefixCls}-header-count`}>共有“{count}”个目标组</div>
            <div className={`${prefixCls}-body`}>
              <TargetManageTable
                loading={loading}
                data={tableList}
                onTableChange={this.onTableChange}
                changeModalVisible={this.changeModalVisible}
                total={total}
                pagination={pagination}
                staffList={staffList}
                getTargetList={this.getTargetList}
              />
            </div>
          </div>
        ) : (
          <Empty
            image={EmptyDataImg}
            imageStyle={{
              margin: '120px 0 24px',
              height: 296
            }}
            description={
              <div>
                <span style={{ color: '#2A2B30' }}>您还未创建过 IP 段模板</span>
                <p style={{ marginTop: 8, color: '#999EA8' }}>
                  创建资产探测任务时可以直接选择事先配置的目标组，
                  <br />
                  任务结束后，新发现的资产会自动填充标签、部门属性
                </p>
              </div>
            }
          />
        )}
        <TargetSettingModal
          modalVisible={ipManageModalVisible}
          changeModalVisible={this.changeModalVisible}
          getTargetList={this.getTargetList}
          isAddIp={true}
          staffList={staffList}
        />
      </div>
    );
  }
}

TargetManage.propTypes = {
  history: PropTypes.object
};

export default TargetManage;
